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Diseño  de  un  sitio  web 

Las  páginas  web  veloces  y  fácilmente  navegables  son  valoradas  por  todos.  Tanto 
los  nativos  digitales  como  los  internautas  más  novatos  e  inexpertos  celebran 
los  diseños  que  permiten  la  accesibilidad  a  los  contenidos  buscados  sin  grandes 
esfuerzos.  La  sobrecarga  de  datos,  colores,  información,  enlaces  o  publicidades 
genera  en  los  usuarios  una  saturación  difícil  de  digerir.  Si  tuviéramos  que  hacer 
un  diagnóstico  diríamos  que  muchas  páginas  web,  en  su  afán  por  capturar  la 
atención  del  usuario,  terminan  generando  una  especie  de  indigestión  virtual  y 
visual. 

¿Cuáles  son  las  claves  para  desarrollar  un  diseño  web  exitoso?  En  este  apartado 
prestaremos  especial  atención  al  uso  de  plantillas,  a  las  fuentes  del  texto, 
a  la  pertinencia  de  los  colores  y  al  tratamiento  de  las  imágenes.  Pero  antes 
de  avanzar  con  esos  temas,  veamos  lo  que  algunos  expertos  en  diseño  nos 
recomiendan: 

■  El  espacio  que  se  usa,  incluso  el  espacio  en  blanco,  comunica  sentidos 

El  uso  del  espacio  virtual  es  estratégico.  Los  diseños  web  en  los  que  abundan 
grandes  espacios  en  blanco,  con  tonalidades  suaves  o  incluso  fuertes  y  oscuras, 
no  siempre  indican  falta  de  creatividad. 

Por  el  contrario,  la  distribución  de  información,  imágenes  y  espacios  es  una  es¬ 
trategia  comunicacional  que  habla  de  la  calidad  del  diseño.  No  hace  falta  mostrar 
todo,  el  usuario  debe  poder  imaginar  lo  suficiente  como  para  sentir  curiosidad  y 
explorar  más. 

■  Se  puede  jugar,  tanto  con  lo  literal  como  con  la  metáfora 

Las  grandes  marcas  son  fácilmente  identificares  porque  supieron  instalar  un  icono 
propio  que  hace  que  el  usuario  lo  relacione  con  su  producto  casi  instantáneamente. 

Para  las  páginas  web  también  se  puede  idear  una  impronta  propia:  un  objeto,  una 
fotografía,  una  frase:  hay  muchos  elementos  que  permitirían  al  navegante  anti¬ 
cipar  intuitivamente  el  contenido  de  la  página.  Este  es  el  gran  desafío  para  quien 
diseñe  su  página  web:  alcanzar  la  distinción  y  un  sello  propio. 
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■  Jerarquizar  los  contenidos  es  decidir  sobre  su  importancia 

¿Todo  es  igual  de  importante?  ¿Hace  falta  que  se  vea  todo  junto?  Es  fundamental 
destacar  con  letras  grandes  y  al  principio  lo  que  es  más  importante.  Lo  secundario 
va  después  y  en  letra  pequeña,  i  No  se  miran  los  créditos  de  una  película  antes  de 
conocer  a  sus  personajes  y  ver  su  trama! 

■  La  letra,  por  la  vista  entra 

La  elección  del  estilo  de  letra  es  un  gran  desafío.  Lo  más  recomendable  es  utilizar 
fuentes  fácilmente  legibles,  sin  sombras  ni  curvaturas  complicadas  que  pudieran 
estorbar  o  cansar  la  vista  del  usuario.  Una  tipografía  armónica  garantiza  más  po¬ 
sibilidades  de  que  un  mensaje  sea  leído. 


Plantillas 

Desde  hace  unos  años  los  celulares  vienen  programados  con  una  opción  de  men¬ 
sajes  prediseñados  que  le  ahorra  al  usuario  el  esfuerzo  de  escribir  un  texto  com¬ 
pleto.  Hay  formatos  para  distintas  ocasiones:  cumpleaños,  compromisos,  eventos 
sociales,  etc. 

Existen  también  diversas  cuentas  de  correo  electrónico  -como  las  de  Yahoo,  Gmail, 
Hotmail-  que  permiten  a  sus  usuarios  programar  mensajes  automáticos  para  los 
períodos  en  que  se  irán  de  vacaciones  o  estarán  un  tiempo  sin  chequear  sus  mails. 

Este  servicio  permite  al  usuario  mantener  la  cuenta  activa,  a  la  vez  que  anunciar  a 
su  interlocutor  que  sus  mensajes  los  leerá  en  cuanto  retome  el  contacto. 

Del  mismo  modo,  para  el  trabajo  de  diseño  web  existen  páginas  prediseñadas 
que  facilitan  al  usuario  el  trabajo  de  planificación,  diseño  y  desarrollo  de  su  página 
web. 

Se  trata  de  las  plantillas  o  páginas  web  prefabricadas.  Algunas  de  ellas  traen 
incorporadas  imágenes  y  están  desarrolladas  con  el  código  HTML,  lo  cual  permite 
al  usuario  modificarlas  en  función  de  sus  intereses  personales,  profesionales,  etc. 
Como  ya  mencionamos,  el  diseño  de  una  web  tiene  mucho  que  ver  con  los  obje¬ 
tivos  del  sitio:  desde  los  colores,  pasando  por  la  tipografía  y  hasta  las  imágenes, 
cada  diseño  promociona  y  muestra  algo  propio:  su  identidad.  Veamos  algunos 
ejemplos  de  plantillas  web: 
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Elección  de  fuentes 

Decidir  qué  tipo  de  letra  usaremos  para  nuestro  sitio  web  parece  algo  sencillo.  Sin 
embargo,  es  un  componente  del  diseño  sobre  el  que  debemos  estar  atentos:  la 

correspondencia  entre  el  estilo  de  la  fuente  y  el  mensaje,  al  igual  que  los 
espacios  del  sitio,  los  colores  y  las  imágenes,  también  comunica  sentidos. 

Imaginemos  el  titular  principal  de  un  boletín  informativo  digital.  Considerando  el 
contenido  del  mensaje,  ¿qué  estilo  de  letra  parece  el  más  apropiado  para  comuni¬ 
car  la  noticia? 


Tragedia  financiera:  Bancos  y  empresas  perdieron  millones  con  la  recesión 
económica 

Tragedia  financiera:  Bancos  y  empresas  perdieron  millones  con  la  recesión 
económica. 

Tragedia  financiera:  Bancos  y  empresas  perdieron  millones  con  la  recesión  económica. 


Hay  que  tener  en  cuenta  que  no  todos  los  sistemas  operativos  que  conocemos  (Mac 
OS,  Unix,  Linux,  Windows)  poseen  o  tienen  instalados  los  mismos  tipos  de  fuente. 
Esta  es  una  de  las  cosas  que  recomendamos  chequear  antes  de  habilitar  un  sitio  web. 

Asimismo,  existen  algunas  diferencias  entre  navegadores  a  la  hora  de  reconocer  fuen¬ 
tes.  Por  ejemplo,  la  fuente  Times  no  es  reconocida  por  el  navegador  Explorer  en  un 
sistema  Windows,  pero  sí  es  reconocida  en  un  navegador  Mozilla  con  el  mismo  sistema. 


Utilización  de  colores 

Nuestros  ojos  son  capaces  de  distinguir  entre  siete  y  diez  millones  de  colores.  Esto 
no  es  menor  y  nos  alerta  sobre  la  importancia  de  la  información  que  llega  a  noso¬ 
tros  a  partir  del  sentido  de  la  visión. 

Entonces,  ¿qué  tan  importante  es  el  uso  de  colores  en  el  diseño  de  una  página 
web?  Esta  pregunta  podría  responderse  de  forma  sencilla,  porque  muchas  veces  el 
éxito  de  un  sitio  depende  más  de  la  originalidad  del  diseñador  y  la  calidad  de  los 
contenidos  que  de  la  puesta  en  escena  de  un  crisol  de  tonos. 

Con  dos  o  tres  colores  podríamos  realizar  un  excelente  diseño  web  para  publicitar 
una  línea  de  cerámicos.  Con  cuatro  o  cinco  colores  quizás  podríamos  armar  un 
blog  literario  donde  publicar  poesías,  cuentos  cortos,  noticias  breves  y  crónicas 
de  viajes.  Pero  sin  el  uso  de  muchos  colores,  ¿cómo  resolvemos  la  presentación 
de  un  sitio  sobre  destinos  turísticos?  ¿O  la  página  publicitaria  de  una  pinturería? 

Hasta  hace  pocos  años,  las  computadoras  a  las  que  accedía  el  común  de  los  usua¬ 
rios  no  tenían  la  calidad  de  resolución  de  imagen1  que  vemos  hoy.  En  términos 

1  Con  esta  expresión  se  designa  el  nivel  de  detalle  que  se  puede  distinguir  de  una  imagen 
determinada. 
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de  memoria,  capacidad  y  prestaciones,  los  equipos  no  solo  eran  lentos  sino  que 
gráficamente  eran  muy  limitados:  trabajaban  apenas  con  256  colores. 


En  la  actualidad,  los  equipos  y  ordenadores  aumentaron  conside¬ 
rablemente  sus  capacidades  tecnológicas:  las  personas  podemos 
disfrutar  de  una  navegación  por  la  Web  donde  la  abundancia  de 
colores  es  algo  habitual 


Lo  cierto  es  que  los  diseñadores  dependen  de  los  programas  que  cada  navegador 
o  browser  contienen.  Los  programas  reciben  desde  el  servidor  según  el  protocolo 
HTTP  -Hypertext  Transfer  Protocol-,  los  contenidos  de  cada  sitio  web  y  le  permiten 
al  usuario  acceder  a  ellos. 

Esos  programas  tienen  diferentes  esquemas  de  funcionamiento,  y  además  inte¬ 
ractúan  con  el  sistema  operativo  que  posee  cada  ordenador  o  computadora,  con  lo 
cual  es  posible  que  una  persona,  si  consulta  la  misma  página  en  dos  PC  diferentes, 
las  visualice  de  manera  distinta. 

¿Cómo  se  arman  los  colores  en  la  PC?  Cada  sistema  operativo  reconoce  tres 
colores  elementales,  a  partir  de  los  cuales  construye  los  demás.  Esa  construcción 
se  da  por  un  proceso  de  mezcla  por  unidades  de  pantalla  o  píxeles.2 


La  capacidad  de  definir  muchos  colores  a  partir  de  estos  tres,  está  dada  por  los 
bits3  de  profundidad:  a  mayor  cantidad  de  bits,  más  precisiones  podrán  hacerse 
sobre  estos  tres  colores  elementales. 

Por  ejemplo: 


■  Para  alcanzar  los  256  colores  son  necesarios  8  bits. 

■  Para  alcanzar  miles  de  colores  son  necesarios  16  bits. 

■  Para  alcanzar  millones  de  colores  son  necesarios  32  bits. 


Inicialmente,  todos  los  monitores  cubrían  prestaciones  gráficas  con  8  bits.  Hoy  en  día, 
gracias  a  los  avances  tecnológicos,  los  ordenadores  mejoraron  su  calidad  y  es  cada 
vez  más  habitual  encontrar  profundidades  de  color  de  16  bits  en  adelante  (incluso  de 
24  y  32). 


2  Ver  definición  de  píxel  en  el  Glosario. 

3  Ver  definición  de  bit  en  el  Glosario. 
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El  uso  de  imágenes 

Dar  visibilidad  a  un  sitio  web  requiere  el  uso  de  imágenes.  Hay  algo  propio  de  la 
imagen  que  es  imposible  describir  con  palabras,  ¡más  allá  de  la  capacidad  de  ex¬ 
presión  que  tenga  el  diseñador  o  diseñadora! 

Sin  embargo,  el  uso  excesivo  de  imágenes  puede  entorpecer  la  navegabi- 
lidad.  El  usuario,  frente  a  una  página  que  tarde  demasiado  tiempo  en  cargarse  o 
en  mostrar  un  contenido,  probablemente  abandone  la  búsqueda  y  decida  visitar 
otro  sitio. 

Esta  dificultad  puede  sortearse  si  aprendemos  a  reducir  el  lugar  que  ocupan  las 
imágenes:  no  nos  referimos  a  su  apariencia,  sino  al  peso  que  generan  como 
archivo.  Si  las  imágenes  son  de  alta  definición,  tardan  mucho  más  tiempo  en  ser 
transferidas. 

Para  optimizar  los  ficheros  gráficos,  es  recomendable  hacer  lo  siguiente: 

■  Con  los  archivos  de  extensión  .gif  se  puede  reducir  el  número  de  colores 
disponibles  en  la  paleta.  Es  posible  hacerlo  con  el  editor  gráfico,  o  incluso  al 
guardar  el  archivo  en  algún  sitio  del  disco. 


■  Con  los  archivos  de  extensión  .jpg  es  posible  reducir  la  calidad  de  la  imagen 
sin  que  esta  reduzca  o  pierda  el  sentido  visual  en  su  resolución  final. 


Programas  a  imagen  y  sin  semejanza 

Existen  varios  programas  de  edición  gráfica  especializados  para  el  tratamiento 
de  imágenes.  Photoshop  5.5  o  Photoshop  6  permiten  al  usuario  configurar  una 
imagen  de  manera  sencilla.  Desde  la  opción  de  Guardar  para  el  Web,  es  posible 
definir  la  calidad  del  jpg,  los  colores  del  gif  y  otras  opciones,  en  varias  muestras 
de  la  imagen  a  la  vez. 


Pueden  conocer  el  programa  Gimp  para  edición  gráfica 
ingresando  al  escritorio  de  alumnos  de  educ.ar 


Glosario 

Bit:  en  un  sistema  de  numeración  binario  la  información  puede  representarse  úni¬ 
camente  mediante  el  uso  de  un  bit  o  dígito  binario:  0  o  1.  El  bit  es  la  menor  unidad 
de  representación  utilizada  en  el  campo  de  la  informática. 

Píxel:  es  la  unidad  en  color  más  pequeña  que  forma  parte  de  una  imagen  digital. 
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